<template>
    <div class="boxs">
        <div style='margin-bottom: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <template v-for="i, index in columns.slice(0, -1)" :key="i">
                        <a-col v-show="expand || index < 6" :span="4">
                            <a-form-item name="date_time" label="选择时间" v-if="index == columns.slice(0, -1).length - 1">
                                <a-range-picker v-model:value="formState['date_time']" show-time
                                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                            </a-form-item>
                            <a-form-item :name="`${i.key}`" :label="`${i.title}`" v-else>
                                <a-input v-model:value="formState[`${i.key}`]"
                                    :placeholder="i.key == 'withdrawal_amount' ? '可以使用> <运算符 例:>900,<800' : '请输入'"></a-input>
                            </a-form-item>
                        </a-col>
                    </template>
                </a-row>
                <a-row>
                    <a-col :span="24" style="text-align: right">
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px" @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>
                        <a style="font-size: 12px" @click="expand = !expand" v-show="columns.slice(0, -1).length - 1 > 6">
                            <template v-if="expand">
                                <UpOutlined />
                            </template>
                            <template v-else>
                                <DownOutlined />
                            </template>
                            更多
                        </a>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table :columns="columns" :data-source="data" 
            :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">
            <template #headerCell="{ column }">
                <template v-if="column.key === 'nickname'">
                    用户名称
                </template>
            </template>

            <template #bodyCell="{ column, record }">

                <template v-if="column.key === 'operation'">
                    <a-button type="primary" shape="circle">
                        <template #icon>
                            <eye-outlined color="white" @click="changeModel(record.uid)"/>
                        </template>
                    </a-button>
                </template>
                <template v-if="column.key === 'withdrawal_amount'">
                    <span
                        :style="{ color: record.withdrawal_amount < 500 ? 'green' : record.withdrawal_amount < 1000 ? 'yellow' : 'red' }">￥{{
                            record.withdrawal_amount }}</span>
                </template>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" title="用户提现" :width="550" @cancel="handleCancel"
            :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>


            <div class="modal-content">
                <div class="left-section">
                    <h2 class="section-title">基本信息</h2>
                    <div class="content" >
                        <div class="info" >
                            <p>
                                <span class="label">用户名称：</span>
                                <span class="value">{{ resData.nickname }}</span>
                            </p>
                            <p>
                                <span class="label">用户电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p> 
                                <span class="label">提现日期：</span>
                                <span class="value" style="color:#FFA07A">{{ resData.date_time}}</span>
                            </p>
                            <p>
                                <span class="label">提现金额：</span>
                                <span class="value" style="color:#FFA07A;font-size: 16px;">￥{{ resData.withdrawal_amount}}</span>
                            </p>
                            <p>
                                <span class="label">提现卡号：</span>
                                <span class="value" style="color:#FFA07A">{{ resData.card}}</span>
                            </p>
                            <p>
                                <span class="label">开户行：</span>
                                <span class="value" style="color:#FFA07A">{{ resData.bank}}</span>
                            </p>
                            <p>
                                <span class="label">户名：</span>
                                <span class="value" style="color:#FFA07A">{{ resData.account_name}}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>

                            <p v-show="redioData==2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6"   />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>
                        </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { EyeOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { reviewAPI,reviewDataAPI } from '../../../api/home'
import { useUserData } from '../../../stores/userData'
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import share from '../../../util/commnet'
import {debounce} from 'lodash'

const textData = ref('')  //不通过的文本域
const redioData = ref(0)        //选择通过或者不通过
const store = useUserData();  //pinia
const router = useRouter()
const note = ref('');   //备注
const totalCount = ref(0)    //总条数
const current = ref(1)      //当前页
const pageSize = ref(10);    //多少条一页

const visible = ref(false);    //弹窗


const resData = ref('');        //弹窗数据

const handleOk = async () => {  //当点击确定时    ['with'|']
    if(share.containsSpecialCharacters(textData.value) || share.containsSpecialCharacters(note.value)){
        message.error("含有非法字符！！！");
        return;
    }
    if(redioData.value){       //审核是否通过选择完成
        let res = await reviewDataAPI(`withDrawal|${resData.value.uid}|A${redioData.value}${redioData.value ==1?'':textData.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}|${resData.value.withid}|${note.value}`);
        console.log(res);
        if (res.code == 400) {
            message.error(res.message);
        } else if (res.code == 201) {
            message.success("审核成功")
        }
        visible.value = false;
        redioData.value = 0;
        textData.value = '';
        pageClick();
    }else{                     //审核没有完成
        message.error({
            content: () => '没有选择审核是否通过',
            style: {
                marginTop: '20vh',
                color:'red'
            },
        })
    }

}

const handleCancel = () => { //当取消弹窗
    redioData.value = 0;
    textData.value = '';

}
const changeModel = async (uid) => {  //当打开弹窗
    visible.value = true;
    let res = await reviewDataAPI(`withDrawal|${uid}|A|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (res.code == 400) {
        message.error(res.message);
        return
    }
    resData.value = res.data[0];

}

// 表单
const expand = ref(false);
const formRef = ref();
const formState = reactive({
    account_name: '',
    bank: '',
    bank_name: '',
    card: '',
    nickname: '',
    phone: '',
    withdrawal_amount: '',
    date_time: []
});
const onFinish = values => {

    pageClick()
};



const debouncePageClick = debounce(async(item)=>{       //防抖
    item ? current.value = item.current : current.value = 1;
    const { account_name, bank, bank_name, card, nickname, phone, withdrawal_amount, date_time } = formState;
    let res = await reviewAPI(`withDrawal|${nickname}|${phone}|${bank}|${card}|${account_name}|${bank_name}|${withdrawal_amount}|${date_time}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)

    console.log(res);
    if (!res) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    data.value = res.data.data;
},300)

const pageClick = async (item) => {  //页面发生变化时 或者各种被调用
    debouncePageClick(item);

}




const columns = reactive([{ //表头部分
    title: '用户名称',
    dataIndex: 'nickname',
    key: 'nickname',
}, {
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone',
}, {
    title: '开户银行',
    key: 'bank',
    dataIndex: 'bank',
}, {
    title: '银行卡号',
    key: 'card',
    dataIndex: 'card',

},
{
    title: '提现银行',
    dataIndex: 'bank_name',
    key: 'bank_name',
}, {
    title: '银行户名',
    key: 'account_name',
    dataIndex: 'account_name',
}, {
    title: '提现金额',
    dataIndex: 'withdrawal_amount',
    key: 'withdrawal_amount',
    sorter: true,
    customSorterIcon: true,
    sortDirections: ['ascend', 'descend', 'none'],
}, {
    title: "提交日期",
    dataIndex: "date_time",
    key: "date_time"
}, {
    title: "操作",
    key: 'operation'
}
]);

const state = reactive({
    searchText: '',
    searchedColumn: '',
});






const data = ref([]);


onMounted(async () => {
    const { account_name, bank, bank_name, card, nickname, phone, withdrawal_amount, date_time } = formState;
    let res = await reviewAPI(`withDrawal|${nickname}|${phone}|${bank}|${card}|${account_name}|${bank_name}|${withdrawal_amount}|${date_time}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (!res) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    console.log(res);
    totalCount.value = res.data.total - 0;  //总条数数据
    data.value = res.data.data;             //第一页数据

})
</script>

<style scoped src="../../css/home/drawal.scss" />
